<!--
@name:addTraditionalDialog
@author:Zhenglei
@date:11:07
@description:addTraditionalDialog
@update:2022/5/1211:07
-->
<template>
  <div>
    <el-dialog :visible.sync="visible"
               :title="title"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="addData"
               label-position="right"
               label-width="180px"
               ref="formModelRef"
               :rules='formModelRules'>
        <el-form-item label="药品名称：" class="is-required">
          <el-select v-model="drugInfo"
                     filterable
                     remote
                     value-key="id"
                     clearable
                     reserve-keyword
                     placeholder="请输入药品名称"
                     :remote-method="searchMethod"
                     :loading="loading"
                     @change="handleSelectItems"
                     class="w-300">
            <el-option v-for="item in drugList"
                       :key="item.id"
                       :label="item.name+item.unit"
                       :value="item">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="数量：" prop="dosageNum">
          <el-input class="w-300" v-model="addData.dosageNum" placeholder="请输入数量" clearable/>
        </el-form-item>
        <el-form-item label="频次：" prop="frequency">
          <el-select v-model="addData.frequency"
                     class="w-300"
                     placeholder="请选择频次">
            <el-option v-for="item in prescriptionConfig[3]"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="单次用量：" prop="dayNum">
          <el-input class="w-300" v-model="addData.dayNum" placeholder="请输入每剂数量" clearable/>
        </el-form-item>
        <el-form-item label="药品规格：" prop="standard">
          <el-input class="w-300" v-model="addData.standard" placeholder="请输入每剂数量" clearable/>
        </el-form-item>
        <el-form-item label="服用时间：" prop="takingTime">
          <el-select v-model="addData.takingTime"
                     class="w-300"
                     placeholder="请选择服用时间">
            <el-option v-for="item in prescriptionConfig[2]"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用法：" prop="usageMethod">
          <el-select v-model="addData.usageMethod"
                     class="w-300"
                     placeholder="请选择用法">
            <el-option v-for="item in prescriptionConfig[5]"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>

        </el-form-item>


      </el-form>
      <p align="center">
        <el-button @click="modalClose"
                   type="info">取 消
        </el-button>
        <el-button type="primary"
                   v-prevent-re-click
                   @click="handleSave">保 存
        </el-button>
      </p>

    </el-dialog>
  </div>
</template>

<script>
import pinyin from "js-pinyin";

export default {
  name: "addTraditionalDialog",
  props: {
    listdata: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新增',
      addData: {
        drugName: '',
        dosageNum: '',
        frequency: '',
        id: '',
        unit: '',
        dayNum: '',
        standard: '',
        takingTime: '',
        usageMethod: '',
      },
      loading: false,
      drugInfo: {},
      drugList: [],
      prescriptionConfig:[],
      formModelRules: {
        dosageNum: [{required: true, message: '请输入总量'}],
        dayNum: [{required: true, message: '请输入每日剂数'}],
        usageMethod: [{required: true, message: '请选择用法'}],
        frequency: [{required: true, message: '请选择频次'}],
        timeNum: [{required: true, message: '请输入每次用量'}],
        takingTime: [{required: true, message: '请选择服用时间'}],
        standard: [{required: true, message: '请输入规格'}],
      },
    }
  },
  created() {
    console.log('西药-------',this.listdata)
    if (this.listdata.isEdit) {
      //编辑
      this.title = '编辑'
      this.addData= JSON.parse(JSON.stringify(this.listdata))
      //回显搜索药品
      let first=this.addData.drugName.substring(0,1)
      let char=''
      this.pinyin.setOptions({checkPolyphone:false,charCase:0})
      char=pinyin.getCamelChars(first)
      this.searchDrug(char)
      this.drugInfo.id=this.addData.id
    } else {
      //新增
      this.title = '新增'
    }
    this.getPrescriptionConfigList()
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    //查询处方配置
    getPrescriptionConfigList() {
      this.post(this.api.slowDisease.getPrescriptionConfigList).then((res) => {
        if (res.data.code === '200') {
          this.prescriptionConfig = res.data.object
        }
      })
    },
    searchMethod(query) {
      if (query !== '') {
        this.loading = true; // 锁住
        this.searchDrug(query)
      } else {
        this.drugList = [];
      }
    },
    //搜索药品
    searchDrug(query) {
      this.post(this.api.slowDisease.searchDrug, {
        code: query,
        typeList: [3, 4]
      }).then(res => {
        if (res.data.code === '200') {
          this.loading = false;
          this.drugList = res.data.object;
        }
      })
    },
    // 选中关联检测项
    handleSelectItems(item) {
      this.addData.id = item.id
      this.addData.unit = item.unit
      this.addData.drugName = item.name
    },
    handleSave() {
      this.$refs.formModelRef.validate(valid => {
        if (valid) {
          if (this.drugInfo.id){
            this.$emit('handleResultData', this.addData)
            this.modalClose()
          }else {
            this.$message.error('请选择药品')
          }

        }
      })
    }
  },
}
</script>

<style scoped>

</style>
